<?xml version="1.0" encoding="UTF-8" ?>
<%@ page language="java" contentType="text/html; charset=UTF-8"	pageEncoding="UTF-8"%>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<head>
	<title>Ảnh đẹp - ${loaiAnhDep.name}</title>
	<meta name="keywords" content="anh dep,anh ${loaiAnhDep.alias},Ảnh ${loaiAnhDep.name}" />
	<meta name="description" content="Ảnh đẹp, Ảnh ${loaiAnhDep.name}, danh sách album ảnh ${loaiAnhDep.name}" />
	<script type="text/javascript" src="<spring:url value='/resources/scripts/jquery.masonry.min.js' />"></script>
</head>
<body>

	<section id="boxMain">
		<jsp:include page="../categories.jsp" />
		<jsp:include page="listAlbum.jsp" />
	</section>
	<div class="clear">&nbsp;</div>
	<script type="text/javascript">
		var $container = $('.listItems');
		$container.imagesLoaded(function(){
		  $container.masonry({
		    itemSelector : '.listItems > div',
		    columnWidth : 333,
		    animationOptions: {
		        duration: 400
		    },
		    isFitWidth: true,
		    isAnimated: true
		  });
		});
// 		$("body").append("<div id='off' style='position:fixed;bottom:50px;right:10px;color:#f00'></div>");
		$(window).scroll(function(){
			var offBottom = Math.round($("#footer").offset().top);
			var scrTop = $(this).scrollTop();
			$("#off").html(offBottom + ", " + scrTop);
			if((scrTop + $(this).height()) > offBottom){
				$("#paging").css({
					bottom: "-30px",
					position: "absolute"
				});
			}else{
				$("#paging").css({
					bottom: "30px",
					position: "fixed"
				});
			}
		});
	</script>
</body>
